.header.xp-warning {
  background: -webkit-linear-gradient( #fa6, #f80);
  /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient( #fa6, #f80);
  /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(#fa6, #f80);
  /* Firefox 3.6 - 15 */
  background: linear-gradient(#fa6, #f80);
  /* 标准的语法 */
  color: #fff;
}

.header.xp {
  background: -webkit-linear-gradient( #eee, #ddd);
  /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient( #eee, #ddd);
  /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(#eee, #ddd);
  /* Firefox 3.6 - 15 */
  background: linear-gradient(#eee, #ddd);
  /* 标准的语法 */
}

.fixed {
  position: fixed;
}

.fixed.lb {
  left: 1em;
  bottom: 1em;
}

.flex.fa-btns>* {
  margin-left: .8em;
}

.flex.fa-btns>*:first-child {
  margin-left: 0;
}

.fa-btn, .fa-btn>.fa-btn-inner {
  border-radius: 100%;
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 0 5px #000;
  width: 2em;
  height: 2em;
  position: relative;
}

.fa-btn-menu {
  position: absolute;
  box-shadow: 0 0 5px #000;
  background: #eee;
  border: solid 1px #ccc;
  border-radius: .3em;
  width: max-content;
}

.fa-btn-menu>.item {
  padding: .5em 1em;
  color: #00f;
  min-width: max-content;
}

.fa-btn-menu.up {
  bottom: calc(100% + 1em);
  left: 0;
}